<template>
    <div class="categorize">
        <div class="cate-main">
            <div class="cate-left">
                <ul class="cateList">
                    <li v-for="item in cateList" :key="item.id" @click="getCatelistItem(item.id)">
                        {{ item.name }}
                    </li>
                </ul>
            </div>
            <div class="cate-right">
                <div class="cateItem" v-for="item in articleList" :key="item.id">
                    <span>{{ item.title }}</span>
                    <div >{{ item.updatedAt }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                cateList:[],
                articleList:[]
            }
            
        },
        methods:{
            async getCateList(){
                const params = {
                    // id:6
                }
                const { data: res } = await this.$api.getAllCategory(params);
                this.cateList = res
                console.log(this.cateList)
            },
            async getCatelistItem(id){
                const params = {
                    id : id
                }
                console.log(params)
                const { data: res } = await this.$api.getCategory(params);
                this.articleList = res.rows[0].articles
                console.log(this.articleList)
            }
        },
        mounted(){
            this.getCateList();
        }
    }
</script>
<style lang="scss" scoped>
.categorize{
    margin-top: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    .cate-main{
        width: 90%;
        min-height: 600px;
        display: flex;
        .cate-left{
            width: 10%;
            height: 400px;
            background-color: #fff;
            margin-left: 160px;
            // text-align: center;
            .cateList{
                padding-inline-start: 0;
                height: 100%;
                list-style-type: none;
                li{
                    height: 50px;
                    text-align: center;
                    line-height: 50px;
                }
            }
        }
        @media screen  and (max-width: 500px){
            .cate-left{
                display: none;
            }
        }
        .cate-right{
            width: 55%;
            height: 580px;
            background-color: #fff;
            margin-left: 30px;
            .cateItem{
                width:100%;
                height: 214px;
                border-bottom: 1px solid #ebebeb ;
                padding-top:10px ;
                span{
                    font-weight: bold;
                    margin-left: 15px;
                }
            }

        }
        @media screen  and (max-width: 500px){
            .cate-right{
                width: 100%;
                margin-left: 0;
            }
        }
    }
}

</style>